<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>渐变</title>
    <style>
        /*
        渐变
            linear-gradient 线性渐变
                语法：linear-gradient([<point> || <andle>,] ? <stop>, <stop> [,<stop>]*)
                参数说明：
                    第一个参数表示线性渐变方向
                        to left 设置渐变从右向左 相当于 270deg
                        to right 设置渐变从左向右 相当于 90deg
                        to top 设置渐变从下到上 相当于 0deg
                        to bottom 设置渐变从上到下 相当于180deg 默认值
                        也可以直接指定度数，如 45deg
                    第二个参数是起点颜色，可以指定颜色的位置
                    第三个参数是终点颜色，还可以在后面添加更多的参数，表示多种颜色的渐变
            
            radial-gradient 径向渐变
                语法：radial-gradient([[<shape> || <size>] [at position]? , | at <position>, ]?
                    [<color-stop>][, <color-stop>]+)
                参数说明：
                    position 确定圆心的位置 如果提供两个参数，第一个表示横坐标，第二个表示纵坐标；
                        如果只提供一个，第二个为默认值 50% 即 center
                    shape：渐变的形状，ellipse 表示椭圆形，circle 表示圆形。默认为 ellipse
                        如果元素的形状为正方形的元素，则 ellipse 和 circle 显示一样
                    size：渐变的大小，即渐变到哪里停止，它有四个值。closest-side: 最近边 farthest-side: 最远边
                        closest-corner 最近角 farthest-corner 最远角 默认是 farthest-corner 最远角
                    color：指定颜色 rgba hsla
        */
        * {
            margin: 0;
            padding: 0;
        }

        .linear {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            /* 添加线性渐变 */
            background: linear-gradient(to right, #ccc, #aaa, #888, #aaa, #ccc);
        }

        .radial {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            /* 添加径向渐变 */
            background: radial-gradient(circle, #f00, #0f0);
        }
    </style>
</head>
<body>
    <div class="linear"></div>
    <div class="radial"></div>
</body>
</html>